<style>
    .m-wizard.m-wizard--1 .m-wizard__head .m-wizard__nav .m-wizard__steps .m-wizard__step .m-wizard__step-line > span {
        width: 3.5rem;
    }

    .m-icon {
        font-size: 1.5rem;
    }

    .btn-group-sm > .btn, .btn-ssm {
        padding: .2rem .5rem;
        font-size: .875rem;
        line-height: 1.3;
        border-radius: .2rem;
    }

    .m-accordion.m-accordion--section .m-accordion__item .m-accordion__item-body .m-accordion__item-content kt-grid__item kt-grid__item--fluid, .m-accordion.m-accordion--section .m-accordion__item .m-accordion__item-body > span {
        padding-top: 1.5rem;
    }
</style>
<div class="kt-container  {$theme_layout_class}  kt-grid__item kt-grid__item--fluid">
    <div class="row">
        <div class="kt-portlet kt-portlet--mobile ">
            <div class="kt-portlet__head">
                <div class="kt-portlet__head-label">
                    <div class="kt-portlet__head-title">
                        <h3 class="kt-portlet__head-text">
                            提交工单
                        </h3>
                    </div>
                </div>
                <div class="kt-portlet__head-toolbar">
                    <ul class="nav nav-pills nav-pills--success m-nav-pills--align-right m-nav-pills--btn-pill m-nav-pills--btn-sm"
                        role="tablist">
                        <li class="nav-item m-tabs__item">
                            <a class="nav-link m-tabs__link active" href="{:url('ticket/my/index')}">
                                我的工单
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="kt-portlet__body">
                <div class="m-wizard m-wizard--1 m-wizard--success" id="m_wizard">

                    <!--end: Message container -->

                    <!--begin: Form Wizard Head -->
                    <div class="m-wizard__head kt-portlet__padding-x">

                        <!--begin: Form Wizard Progress -->
                        <div class="m-wizard__progress">
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0"
                                     aria-valuemax="100" style="width: calc(100% + 26px);"></div>
                            </div>
                        </div>

                        <!--end: Form Wizard Progress -->

                        <!--begin: Form Wizard Nav -->
                        <div class="m-wizard__nav">
                            <div class="m-wizard__steps">
                                <div class="m-wizard__step m-wizard__step--done" m-wizard-target="m_wizard_form_step_1">
                                    <div class="m-wizard__step-info">
                                        <a href="#" class="m-wizard__step-number">
											<span>
												<span>1</span>
											</span>
                                        </a>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                        <div class="m-wizard__step-label">
                                            选择问题所属产品
                                        </div>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-wizard__step m-wizard__step--done" m-wizard-target="m_wizard_form_step_2">
                                    <div class="m-wizard__step-info">
                                        <a href="#" class="m-wizard__step-number">
											<span>
												<span>2</span>
											</span>
                                        </a>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                        <div class="m-wizard__step-label">
                                            选择问题类型
                                        </div>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-wizard__step m-wizard__step--done" m-wizard-target="m_wizard_form_step_3">
                                    <div class="m-wizard__step-info">
                                        <a href="#" class="m-wizard__step-number">
											<span>
												<span>3</span>
											</span>
                                        </a>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                        <div class="m-wizard__step-label">
                                            推荐解决方案
                                        </div>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="m-wizard__step m-wizard__step--current"
                                     m-wizard-target="m_wizard_form_step_4">
                                    <div class="m-wizard__step-info">
                                        <a href="#" class="m-wizard__step-number">
											<span>
												<span>4</span>
											</span>
                                        </a>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                        <div class="m-wizard__step-label">
                                            创建工单
                                        </div>
                                        <div class="m-wizard__step-line">
                                            <span></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!--end: Form Wizard Nav -->
                    </div>

                    <!--end: Form Wizard Head -->

                    <!--begin: Form Wizard Form-->
                    <div class="m-wizard__form">

                        <!--
                            1) Use m-form--label-align-left class to alight the form input lables to the right
                            2) Use m-form--state class to highlight input control borders on form validation
                        -->
                        <form class="m-form m-form--fit m-form--label-align-right">
                            <div class="kt-portlet__body">
                                <div class="form-group m-form__group kt-margin-top-10">
                                    <div class="alert m-alert m-alert--default" role="alert">
                                        工单提交时，请不要直接泄露你的机密信息，工作人员处理你的工单时，如果需要你提供相关机密，会向你申请使用
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label for="example-text-input" class="col-2 col-form-label">问题描述</label>
                                    <div class="col-10">
                                        <input class="form-control m-input" type="text" value="业务咨询或业务受影响，需要协助"
                                               id="example-text-input">
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label for="example-email-input" class="col-2 col-form-label">邮箱</label>
                                    <div class="col-10">
                                        <input class="form-control m-input" type="email" value="example@example.com"
                                               id="example-email-input">
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label for="example-url-input" class="col-2 col-form-label">网址</label>
                                    <div class="col-10">
                                        <input class="form-control m-input" type="url" value="https://baidu.com"
                                               id="example-url-input">
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <label for="example-tel-input" class="col-2 col-form-label"> 手机号</label>
                                    <div class="col-10">
                                        <input class="form-control m-input" type="tel" value="135-1111-1111"
                                               id="example-tel-input">
                                    </div>
                                </div>
                            </div>
                            <div class="kt-portlet__foot kt-portlet__foot--fit">
                                <div class="m-form__actions">
                                    <div class="row">
                                        <div class="col-2">
                                        </div>
                                        <div class="col-10">
                                            <button type="reset" class="btn btn-success">提交</button>
                                            <button type="reset" class="btn btn-secondary">重置</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!--end: Form Wizard Form-->
                </div>
            </div>
        </div>
    </div>
</div>
